<template>
	<view class="user-layout">
		<customNav>
			<view style="display: flex; align-items: center;" @click="goBack">
				<uni-icons type="left" size="28"></uni-icons>
				<text class="size18" style="margin-left: 16rpx;">修改密码</text>
			</view>
		</customNav>
		<view class="content">
			<view class="user-form">
				<uni-forms ref="formRef" :modelValue="formData" :rules="formRules">
					<uni-forms-item label="手机号" name="phone">
						<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号"
							:placeholderStyle="placeholderStyle" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code">
						<view class="code-input">
							<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码"
								:placeholderStyle="placeholderStyle" style="width: calc(100% - 120px);" />
							<u-button type="primary" :text="downNumber > 0 ? `${downNumber}s后重试` : '获取验证码'"
								@click="getCode" :disabled="downNumber > 0 || !isPhoneValid"
								customStyle="width: 100px!important;margin-left: 20rpx!important;height:46px"></u-button>
						</view>
					</uni-forms-item>
					<uni-forms-item label="密码" name="pass_word">
						<uni-easyinput type="password" v-model="formData.pass_word" placeholder="请输入密码"
							:placeholderStyle="placeholderStyle" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="pass_word_ok">
						<uni-easyinput type="password" v-model="formData.pass_word_ok" placeholder="请输入确认密码"
							:placeholderStyle="placeholderStyle" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="user-btn">
				<u-button type="primary" text="确 定" @click="formSubmit"
				customStyle="width: 100%;height:46px;font-size: 14px;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import env from "@/config/env.js";
	import customNav from "@/components/nav/index.vue"
	import {
		sendSms,
		updataPassword
	} from "@/api/user/index.js";
	export default {
		components: {
			customNav
		},
		data() {
			return {
				allHeight: "",
				placeholderStyle: 'font-size:16px',
				loading: false,
				downNumber: 0,
				formData: {
					phone: '',
					pass_word: '',
					pass_word_ok: '',
					code: '',
				},
				formRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							pattern: "^1[3-9]\\d{9}$",
							errorMessage: "请输入有效的手机号"
						}],
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}],
					},
					pass_word: {
						rules: [{
							required: true,
							errorMessage: "请输入6-16位密码",
						}, {
							minLength: 6,
							maxLength: 16,
							errorMessage: "请输入6-16位密码"
						}]
					},
					pass_word_ok: {
						rules: [{
							required: true,
							errorMessage: "请输入6-16位密码",
						}, {
							minLength: 6,
							maxLength: 16,
							errorMessage: "请输入6-16位密码"
						}]
					},
				}
			};
		},
		onShow() {
			let that = this
			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					// 获取状态栏高度
					const statusBarHeight = res.statusBarHeight;
					// 计算导航栏高度，这里假设导航栏内容高度为 44px
					const navBarHeight = 44;
					const paddingTop = statusBarHeight
					that.allHeight = statusBarHeight + navBarHeight
				}
			});
		},
		// 组件销毁时清除定时器
		onUnload() {
			if (this.timer) clearInterval(this.timer)
		},
		computed: {
			// 计算属性判断手机号是否有效
			isPhoneValid() {
				return /^1[3-9]\d{9}$/.test(this.formData.phone)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 完善获取验证码方法
			async getCode() {
				// 防抖判断
				if (this.downNumber > 0) return

				try {
					// 前置校验
					if (!this.isPhoneValid) {
						return uni.showToast({
							title: '请输入有效的手机号',
							icon: 'none'
						})
					}

					// 调用发送接口
					const res = await sendSms({
						phone: this.formData.phone,
					})

					if (res.status == 200) {
						uni.showToast({
							title: '验证码已发送'
						})
						// 开始倒计时
						this.startCountdown()
					} else {
						uni.showToast({
							title: err.msg || '发送失败',
							icon: 'none'
						})
					}
				} catch (err) {
					uni.showToast({
						title: err.msg || '验证码发送失败',
						icon: 'none'
					})
				}
			},
			// 新增倒计时方法
			startCountdown() {
				this.downNumber = 60
				this.timer = setInterval(() => {
					if (this.downNumber <= 0) {
						clearInterval(this.timer)
						return
					}
					this.downNumber--
				}, 1000)
			},
			// 修改表单提交方法
			async formSubmit() {
				if (this.loading) return
				this.loading = true

				try {
					// 表单校验
					const valid = await this.$refs.formRef.validate()
					if (!valid) return

					// 密码一致性校验
					if (this.formData.pass_word !== this.formData.pass_word_ok) {
						return uni.showToast({
							title: '两次密码不一致',
							icon: 'none'
						})
					}
					let params = {
						phone: this.formData.phone,
						pass_word: this.formData.pass_word,
						code: this.formData.code,
					}
					console.log(params)
					// 调用修改密码接口
					const res = await updataPassword(params)
					if (res.status === 200) {
						uni.showToast({
							title: '修改成功'
						})
						setTimeout(() => uni.navigateBack(), 1500)
					} else {
						uni.showToast({
							title: err.msg || '修改失败',
							icon: 'none'
						})
					}
				} catch (err) {
					uni.showToast({
						title: err.msg || '修改失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			}
		},
	}
</script>

<style scoped>
	.content {
		width: 100%;
		padding-top: 30px;
		background-color: #ffffff;
	}

	/* 样式可以根据需要自行调整 */
	.user-layout {
		padding: 0px px 0 0px;
		box-sizing: border-box;
		height: 100vh;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #F8F9F9;
	}

	.user-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.user-subtitle {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.nav {
		color: #007aff;
		font-weight: bold;
	}

	.user-form {
		margin-bottom: 20px;
	}

	.user-btn .btn {
		width: 100%;
	}

	.code-input {
		display: flex;
		align-items: center;
		width: 100%;
	}
</style>